<template>
	<div class="tabs">
		<div class="tabs_header">
			<div class="tabs_header_main">
				<a href="javascript:;" @click="tabClickHandle" :class="currentTab>0?' on':''">{{tabsOneTitle}}</a>
				<a href="javascript:;" @click="tabClickHandle" :class="currentTab<=0?' on':''">{{tabsTwoTitle}}</a>
			</div>
		</div>
		<div class="tabs_main">
			<div :class="'tabs_main_item'+(currentTab<=0?' on':'')" v-if="type === 'goods'"><slot name="user"></slot></div>
			<div :class="'tabs_main_item'+(currentTab>0?' on':'')" v-if="type === 'goods'"><slot name="follow"></slot></div>
			<div :class="'tabs_main_item'+(currentTab>0?' on':'')" v-if="type === 'user'"><slot name="follows"></slot></div>
			<div :class="'tabs_main_item'+(currentTab<=0?' on':'')" v-if="type === 'user'"><slot name="followers"></slot></div>
		</div>
	</div>
</template>
<script>
	export default{
		name:"tabs",
		data:function(){
			return {
				currentTab:0
			}
		},
		props:["tabsOneTitle", "tabsTwoTitle", "type"],
		mounted:function(){

		},
		methods:{
			tabClickHandle(e){
				let a = this.$data.currentTab;
				a = a+1>=2 ? 0 : a+1;
				this.$set(this, "currentTab", a)
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.tabs{
		.tabs_header{
			background-color: #fff;
			font-size: 20/@base;
			.tabs_header_main{
				display: flex;
				margin:0 20/@base;
				padding:10/@base 20/@base;
				a{
					width:50%;
					text-decoration: none;
					text-align: center;
					color:#666;
					background-color: #efefef;
					padding:10/@base 20/@base;
					&:first-child{
						border-top-left-radius:5/@base;
						border-bottom-left-radius:5/@base;
					}
					&:last-child{
						border-top-right-radius:5/@base;
						border-bottom-right-radius:5/@base;
					}
					&.on{
						background-color: #b0e0e6;
						color:#333;
						width:99%;
						transition: width .5s;
					}
				}
			}
		}
		.tabs_main{
			.tabs_main_item{
				display:none;
				&.on{
					display:block;
				}
			}
		}
	}
</style>